<template>
  <div class="login_wrapper">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h1 class="login-title">欢迎登录</h1>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item class="login-btn-box">
        <el-button type="primary" @click="login('form')">登录</el-button>
        <el-button @click="()=>{this.form.username='';this.form.password=''}">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  import qs from 'qs'

  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        userData: {
          userId: '',
          username: '',
          orderTypeNames: []
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' } /*blur失去焦点时触发*/
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' } /*blur失去焦点时触发*/
          ]
        }
      }
    },
    methods: {
      login: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post('/login', {username: this.form.username, password: this.form.password })
            .then(res => {
              // console.log(res)
              if (res.status === 200){
                sessionStorage.setItem("isLogin", "true");
                this.userData.userId = res.data.id
                this.userData.username = this.form.username
                this.userData.orderTypeNames = res.data.orderTypeNames
                this.$store.dispatch('asyncUpdateUser', this.userData);
                this.$router.push("/main/userCenter");
              }else{
                this.$message.error('用户不存在或密码错误');
                return false;
              }
            })
            .catch(err=>{
              console.log(err)
              let {response} = err
              this.$message.error(response.data.message);
              return false;
            })
          } else {
            this.$message.error('请输入账号密码');
            return false;
          }
        });

      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #2d3a4b;
  $light_gray: #68b0fe;
  .login_wrapper{
    min-height: 100%;
    height: calc(100vh - 0px);
    width: 100%;
    background-color: $bg;
    overflow: hidden;
  }

  .login-title {
    text-align: center;
    line-height:82px;
  }

  .login-box {
    background-color: white;
    /*按钮，放到左边去*/
    text-align: left;
    /*宽度*/
    width: 400px;
    /*边框*/
    border: 1px solid #DCDFE6;
    /*内边距（留白，间隙）,4个方向：上，右，下，左*/
    padding: 20px 60px 20px 20px;
    /*框框居中*/
    margin: 0 auto;
    /*框框向下一点*/
    margin-top: 150px;
    /*框框圆角*/
    border-radius: 7px;
    /*立体，阴影*/
    box-shadow: 0 0 20px;

    /*position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;*/
    .login-btn-box{
      text-align:left;
      margin:0px 0px 0px 80px;
    }
  }
</style>
